<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="/static/dist/layui.js"></script>
    <link rel="stylesheet" href="/static/dist/css/layui.css">
    <script type="text/javascript" src="/static/dist/tableSelect.js"></script>
    <title>TableSelect</title>
    <style>
        .layui-table-cell{
            text-align:center;
            height: auto;
            white-space: normal;
        }

        .layui-table img{
            max-width:300px
        }

        .layui-form-item .layui-input-block {
            display: flex;
            align-items: center;
        }

        .layui-form {
            border-top: 20px;
            padding-top: 20px;
        }

        #name {
            font-size: 20px;
        }

        #price {
            font-size: 32px;
            color: rgba(255,95,56,1);
            margin-bottom: 10px;
        }

        #outline {
            font-size: 20px;
            color: #666;
            margin-top: 10px;
        }

        #productImage {
            max-height: 400px;
        }

        .product-label{
            font-size: 16px;
            font-weight: 700;
        }

        .product-value{
            font-size: 16px;
            font-weight: 700;
        }

        .image-container {
            display: flex;
            justify-content: center;
        }

        .product-row.image-container {
            margin-top: 50px;
        }

        .comment-form {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        #comment-input {
            width: 100ch;
            margin-right: 10px;
            resize: none;
        }

        .comment-time {
            font-size: 12px;
            opacity: 0.7;
        }

        .comment-rating {
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
        }

        .comment-info {
            display: flex;
            align-items: center;
        }

    </style>
</head>

<body>
<div class="layui-row layui-bg-black" >
    <div class="layui-col-md1 layui-bg-black">
        <a href="/">
            <img src="/static/logo.png" class="layui-logo" style="height:55px">
        </a>
    </div>
  <div class="layui-col-md8 layui-bg-black">
        <form class="layui-form" action="" style="padding:11px">
            <div class="layui-form-item" style="height: 18px">
                <div class="layui-input-inline" style="width:850px">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="search">
                </div>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-warm" id="searchBtn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="layui-col-md3 layui-bg-black" >
        <ul class="layui-nav" style="padding:0px;bottom: 3px">
            {% if user %}
                <li class="layui-nav-item">
                    <a href="/user/manage"><img src="/static/yang.jpeg" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/user/manage">订单信息</a></dd>
                        <dd><a href="/user/info">用户信息</a>
                        <dd><a href="/password">修改密码</a></dd>
                        <dd><a href="/loginout">退了</a></dd>
                    </dl>
                </li>
            {% else %}

                <li class="layui-nav-item">
                    <a href="">注册/登录</a>
                    <dl class="layui-nav-child">
                        <dd><a href="http://localhost:5000/register">注册</a></dd>
                        <dd><a href="http://localhost:5000/login">登录</a></dd>
                    </dl>
                </li>
            {% endif %}
            <li class="layui-nav-item">
                <a href="/user/car">购物车</a>
            </li>
            <li class="layui-nav-item">
                <a href="/chat">客服<span class="layui-badge-dot"></span></a>
            </li>


        </ul>

    </div>
</div>

<div class="layui-row  layui-bg-cyan" style="padding: 8px">
    <div class="layui-col-md1" style="left: 20px">
        <button type="button" class="layui-btn layui-btn-xs" >
            <a href="/show/shop?type=0">全部</a>
        </button>
    </div>
    <div class="layui-col-md11" style="right: 20px">
          <span class="layui-breadcrumb" lay-separator="|">
            <a href="/show/shop?type=1">酒水饮料</a>
            <a href="/show/shop?type=2">当季水果</a>
            <a href="/show/shop?type=3">面包糕点</a>
            <a href="/show/shop?type=4">肉干卤味</a>
            <a href="/show/shop?type=5">糖果果冻</a>
            <a href="/show/shop?type=6">膨化食品</a>
            <a href="/show/shop?type=7">饼干曲奇</a>
            <a href="/show/shop?type=8">坚果炒货</a>
            <a href="/show/shop?type=9">蛋糕甜品</a>
            <a href="/show/shop?type=10">蛋挞披萨</a>
         </span>

    </div>
</div>

<div class="layui-main">
    <div class="layui-col-md5 layui-col-lg-offset1">
        <img id="productImage" src="" alt="暂无">
    </div>
    <div class="layui-col-md5 ">
        <form class="layui-form" action="">
            <br><br>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 32px"><strong>名称</strong></label>
                <div class="layui-input-block">
                    <span id="name" class="layui-form-text"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 32px"><strong>卖点</strong></label>
                <div class="layui-input-block">
                    <span id="outline" class="layui-form-text"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 32px;top: 70px"><strong>价格</strong></label>
                <div class="layui-input-block" style="top: 70px">
                    <span id="price" class="layui-form-text"></span>
                </div>
            </div>
            <br><br><br><br>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: 32px"><strong>数量</strong></label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="font-size: 24px" id="decrease">-</button>
                    <span id="number" class="layui-form-text layui-btn layui-btn-primary layui-btn-lg" style="font-size: 24px">1</span>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="font-size: 24px" id="increase">+</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div style="text-align: left">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-lg" style="border-radius: 25px 0 0 25px" id="buy">&nbsp;立即购买&nbsp;</button>
                    <button type="button" class="layui-btn layui-btn-warm layui-btn-lg" style="border-radius: 0 25px 25px 0" id="addToCart">加入购物车</button>
                </div>
            </div>
            <input type="hidden" id="goodIdInput" name="good_id">
            <input type="hidden" id="nameInput" name="name">
            <input type="hidden" id="priceInput" name="price">
            <input type="hidden" id="numberInput" name="number">
            <input type="hidden" id="typeInput" name="type">
            <input type="hidden" id="outlineInput" name="outline">
            <input type="hidden" id="imgUrlInput" name="img_url">
            <input type="hidden" id="linkUrlInput" name="link_url">
        </form>
    </div>

    <div class="layui-tab layui-col-md12">
        <ul class="layui-tab-title">
            <li class="layui-this">商品详情</li>
            <li>商品评价</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="product-container">
                    <div class="product-info">
                        <div class="product-row">
                            <div class="product-field">
                                <div class="layui-col-md4">
                                    <span class="product-label">品牌：</span>
                                    <span class="product-value">懒洋洋</span>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">系列：</span>
                                <span class="product-value">规格：多肉葡萄380g</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">产地：</span>
                                <span class="product-value">中国大陆</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-row">
                        <div class="product-field">
                            <div class="layui-col-md4">
                                <span class="product-label">省份：</span>
                                <span class="product-value">湖北省</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">城市：</span>
                                <span class="product-value">宜昌市</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">包装方式：</span>
                                <span class="product-value">包装</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-row">
                        <div class="product-field">
                            <div class="layui-col-md4">
                                <span class="product-label">果冻布丁种类：</span>
                                <span class="product-value">果味型果冻</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">形态：</span>
                                <span class="product-value">凝胶</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">净含量：</span>
                                <span class="product-value">380g</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-row">
                        <div class="product-field">
                            <div class="layui-col-md4">
                                <span class="product-label">蛋白质：</span>
                                <span class="product-value">0g/100g</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">能量：</span>
                                <span class="product-value">340kJ/100g</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">脂肪：</span>
                                <span class="product-value">0g/100g</span>
                            </div>
                        </div>
                    </div>
                    <div class="product-row">
                        <div class="product-field">
                            <div class="layui-col-md4">
                                <span class="product-label">碳水化合物：</span>
                                <span class="product-value">20g/100g</span>
                            </div>
                            <div class="layui-col-md4">
                                <span class="product-label">钠：</span>
                                <span class="product-value">20mg/100g</span>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="product-row layui-col-md12 image-container">
                        <img src="/static/lyy.jpg" alt="" style="width: 586px">
                    </div>
                    <div class="product-row layui-col-md12 image-container">
                        <img src="/static/lyy1.jpg" alt="" style="width: 586px">
                    </div>
                    <div class="product-row layui-col-md12 image-container">
                        <img src="/static/lyy2.jpg" alt="" style="width: 586px">
                    </div>
                </div>
            </div>


            <div class="layui-tab-item">
                <div class="comment-container">
                    <div class="comment-form">
                        <textarea id="comment-input" placeholder="请输入评论内容"></textarea>
                        <div id="rating"></div>
                        <button id="comment-submit" class="layui-btn">提交评论</button>
                    </div>
                    <ul id="comment-list" class="comment-list layui-timeline"></ul>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>




<script>
    $("#searchBtn").click(function() {
        var keyword = $("#search").val();
        window.location.href = "/show/search?"+"keyword="+keyword;
    });
</script>


<script>
    layui.use('jquery', function(){
        var $ = layui.jquery;
        var rate = layui.rate;
        var element = layui.element;

        // 渲染评分组件
        var ins1 = rate.render({
            elem: '#rating', // 绑定元素
            length: 5,
            choose: function(value) {
                // 当评分值变化时，将评分值设置到评论输入框
                document.getElementById('comment-input').setAttribute('data-rating', value);
            }
        });


        var commentList = document.getElementById('comment-list');

        // 获取评论输入框、提交按钮元素
        var commentInput = document.getElementById('comment-input');
        var commentSubmit = document.getElementById('comment-submit');

        // 监听提交按钮点击事件
        commentSubmit.addEventListener('click', function() {
            // 获取评论内容和评分值
            var content = commentInput.value;
            var rating = commentInput.getAttribute('data-rating');

            // 获取当前时间
            var currentTime = new Date().toLocaleString();

            $.ajax({
                url: '/api/username', // 实际获取用户名的后端接口地址
                type: 'GET',
                success: function(response) {
                    var username = response.username; // 获取用户名

                    var commentItem = document.createElement('li');
                    var usernameElement = document.createElement('span');
                    usernameElement.className = 'layui-timeline-title';
                    usernameElement.innerText = username;
                    // 创建评论星级元素
                    var ratingElement = document.createElement('span');
                    ratingElement.className = 'comment-rating';
                    rate.render({
                        elem: ratingElement,
                        value: rating,
                        readonly: true,
                        length: 5
                    });

                    // 创建评论内容元素
                    var contentElement = document.createElement('p');
                    contentElement.innerText = content;
                    contentElement.style.fontSize='30px'

                    // 创建评论时间元素
                    var timeElement = document.createElement('i');
                    timeElement.className = 'layui-icon layui-timeline-date comment-time';
                    timeElement.innerText = currentTime;

                    // 将评论用户名、内容、时间添加到评论元素中
                    commentItem.appendChild(usernameElement);
                    commentItem.appendChild(document.createTextNode(' ')); // 添加空格
                    commentItem.appendChild(ratingElement);
                    commentItem.appendChild(contentElement);
                    commentItem.appendChild(timeElement);

                    // 将评论元素添加到评论列表中
                    commentList.insertBefore(commentItem, commentList.firstChild);

                    // 清空评论输入框内容和评分值
                    commentInput.value = '';
                    commentInput.removeAttribute('data-rating');

                },
                error: function(error) {
                    console.error('获取用户名时发生错误:', error);
                }
            });





            $.ajax({
                url: '/api/username', // 实际获取用户名和商品ID的后端接口地址
                type: 'GET',
                success: function(response) {
                    var urlParts = window.location.href.split('/');
                    var _id = urlParts[urlParts.length - 1];
                    var data = {
                        good_id: _id, // 实际商品ID
                        username: response.username, // 实际用户名
                        comment: content,
                        star: rating,
                        comment_time: currentTime
                    };
                    $.ajax({
                        url: '/save/comment',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        success: function(result) {
                            if (result.success) {
                                console.log('评论已成功提交');
                            } else {
                                console.error('评论提交失败');
                            }
                        },
                        error: function(error) {
                            console.error('评论提交时发生错误:', error);
                        }
                    });

                    // 重新渲染评分组件
                    rate.render({
                        elem: '#rating',
                        length: 5,
                        choose: function(value) {
                            // 当评分值变化时，将评分值设置到评论输入框
                            commentInput.setAttribute('data-rating', value);
                        }
                    });

                    // 修改评论用户名和星级的间距
                    usernameElement.style.marginBottom = '1px';

                    // 修改评论文本和时间的间距
                    contentElement.style.marginBottom = '10px';

                    // 重新渲染layui元素
                    element.render();


                    userInfo.username = response.username;
                    console.log(userInfo.username)
                },
                error: function(error) {
                    console.error('获取用户名和商品ID时发生错误:', error);
                }
            });

        });

        $(document).ready(function() {
            var urlParts = window.location.href.split('/');
            var _id = urlParts[urlParts.length - 1];
            var ajaxURL = '/get/comment/' + _id;

            $.ajax({
                url: ajaxURL,
                type: 'POST',
                dataType: 'json',
                success: function(response) {
                    var comments = response.data;
                    var commentList = document.getElementById('comment-list');
                    for (var i = 0; i < comments.length; i++) {
                        var comment = comments[i];
                        var commentItem = document.createElement('li');

                        // 创建用户名元素
                        var usernameElement = document.createElement('span');
                        usernameElement.className = 'layui-timeline-title';
                        usernameElement.innerText = comment.username;

                        // 创建星级元素
                        var ratingElement = document.createElement('span');
                        ratingElement.className = 'comment-rating';
                        rate.render({
                            elem: ratingElement,
                            value: comment.star,
                            readonly: true,
                            length: 5
                        });

                        // 创建评论内容元素
                        var contentElement = document.createElement('p');
                        contentElement.innerText = comment.comment;
                        contentElement.style.fontSize='30px'

                        // 创建评论时间元素
                        var timeElement = document.createElement('i');
                        timeElement.className = 'layui-icon layui-timeline-date comment-time';
                        timeElement.innerText = comment.comment_time;

                        // 将用户名、星级、评论内容和时间添加到评论项元素中
                        commentItem.appendChild(usernameElement);
                        commentItem.appendChild(document.createTextNode(' ')); // 添加空格
                        commentItem.appendChild(ratingElement);
                        commentItem.appendChild(contentElement);
                        commentItem.appendChild(timeElement);

                        // 将评论项元素添加到评论列表中
                        commentList.appendChild(commentItem);
                    }
                },
                error: function(error) {
                    console.error('获取评论列表时发生错误:', error);
                }
            });
        });


        $(document).ready(function() {
            // 请求接口获取数据并填充页面元素
            function fetchAndDisplayProduct() {
                var urlParts = window.location.href.split('/');
                var _id = urlParts[urlParts.length - 1];
                var ajaxURL = '/get/good/' + _id;
                $.ajax({
                    url: ajaxURL,
                    method: 'GET',
                    dataType: 'json',
                    success: function(responseData) {
                        console.log(responseData)
                        $('#goodIdInput').text(responseData.data.id)
                        $('#name').text(responseData.data.name);
                        $('#price').text(responseData.data.price);
                        $('#typeInput').text(responseData.data.type);
                        $('#outline').text(responseData.data.outline);
                        $('#productImage').attr('src', responseData.data.img_url);
                        $('#linkUrlInput').text(responseData.data.link_url);

                        // 设置隐藏域的值，用于表单提交
                        $('#goodIdInput').val(responseData.data.id)
                        $('#nameInput').val(responseData.data.name);
                        $('#priceInput').val(responseData.data.price);
                        $('#typeInput').val(responseData.data.type);
                        $('#outlineInput').val(responseData.data.outline);
                        $('#imgUrlInput').val(responseData.data.img_url);
                        $('#linkUrlInput').val(responseData.data.link_url);
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                    }
                });
            }

            fetchAndDisplayProduct();

            // 获取数量元素和增加减少按钮元素
            var numberElement = document.getElementById("number");
            var decreaseButton = document.getElementById("decrease");
            var increaseButton = document.getElementById("increase");

            // 初始数量为1
            var number = 1;

            // 增加按钮点击事件处理
            increaseButton.onclick = function() {
                number++;
                numberElement.innerHTML = number;
            };

            // 减少按钮点击事件处理
            decreaseButton.onclick = function() {
                if (number > 1) {
                    number--;
                    numberElement.innerHTML = number;
                }
            };

            // 立即购买按钮点击事件处理
            document.getElementById("buy").onclick = function() {
                // 创建一个form元素
                var formElement = document.createElement("form");
                formElement.action = "/add/order/good";
                formElement.method = "POST";

                // 创建商品名、价格和数量的input元素，并设置其属性和值
                var goodIdInput = document.createElement("input");
                goodIdInput.type = "hidden";
                goodIdInput.name = "good_id";
                goodIdInput.value = $('#goodIdInput').val();

                var nameInput = document.createElement("input");
                nameInput.type = "hidden";
                nameInput.name = "name";
                nameInput.value = $('#nameInput').val();

                var priceInput = document.createElement("input");
                priceInput.type = "hidden";
                priceInput.name = "price";
                priceInput.value = $('#priceInput').val();

                var numberInput = document.createElement("input");
                numberInput.type = "hidden";
                numberInput.name = "number";
                numberInput.value = number;

                var typeInput = document.createElement("input");
                typeInput.type = "hidden";
                typeInput.name = "type";
                typeInput.value = $('#typeInput').val();

                var outlineInput = document.createElement("input");
                outlineInput.type = "hidden";
                outlineInput.name = "outline";
                outlineInput.value = $('#outlineInput').val();

                var imgUrlInput = document.createElement("input");
                imgUrlInput.type = "hidden";
                imgUrlInput.name = "img_url";
                imgUrlInput.value = $('#imgUrlInput').val();

                var linkUrlInput = document.createElement("input");
                linkUrlInput.type = "hidden";
                linkUrlInput.name = "link_url";
                linkUrlInput.value = $('#linkUrlInput').val();

                // 将input元素添加到form元素中
                formElement.appendChild(goodIdInput);
                formElement.appendChild(nameInput);
                formElement.appendChild(priceInput);
                formElement.appendChild(numberInput);
                formElement.appendChild(typeInput);
                formElement.appendChild(outlineInput);
                formElement.appendChild(imgUrlInput);
                formElement.appendChild(linkUrlInput);

                // 将form元素添加到页面中，并提交表单
                document.body.appendChild(formElement);
                formElement.submit();
            };

            // 添加购物车按钮点击事件处理
            document.getElementById("addToCart").onclick = function() {
                // 创建一个form元素
                var formElement = document.createElement("form");
                formElement.action = "/add/car/good";
                formElement.method = "POST";

                // 创建商品名、价格和数量的input元素，并设置其属性和值
                var goodIdInput = document.createElement("input");
                goodIdInput.type = "hidden";
                goodIdInput.name = "good_id";
                goodIdInput.value = $('#goodIdInput').val();

                var nameInput = document.createElement("input");
                nameInput.type = "hidden";
                nameInput.name = "name";
                nameInput.value = $('#nameInput').val();

                var priceInput = document.createElement("input");
                priceInput.type = "hidden";
                priceInput.name = "price";
                priceInput.value = $('#priceInput').val();

                var numberInput = document.createElement("input");
                numberInput.type = "hidden";
                numberInput.name = "number";
                numberInput.value = number;

                var typeInput = document.createElement("input");
                typeInput.type = "hidden";
                typeInput.name = "type";
                typeInput.value = $('#typeInput').val();

                var outlineInput = document.createElement("input");
                outlineInput.type = "hidden";
                outlineInput.name = "outline";
                outlineInput.value = $('#outlineInput').val();

                var imgUrlInput = document.createElement("input");
                imgUrlInput.type = "hidden";
                imgUrlInput.name = "img_url";
                imgUrlInput.value = $('#imgUrlInput').val();

                var linkUrlInput = document.createElement("input");
                linkUrlInput.type = "hidden";
                linkUrlInput.name = "link_url";
                linkUrlInput.value = $('#linkUrlInput').val();

                // 将input元素添加到form元素中
                formElement.appendChild(goodIdInput);
                formElement.appendChild(nameInput);
                formElement.appendChild(priceInput);
                formElement.appendChild(numberInput);
                formElement.appendChild(typeInput);
                formElement.appendChild(outlineInput);
                formElement.appendChild(imgUrlInput);
                formElement.appendChild(linkUrlInput);

                // 将form元素添加到页面中，并提交表单
                document.body.appendChild(formElement);
                formElement.submit();
            };
        });
    });
</script>
</body>
</html>





